<template>
  <div class="agent__container">
    <div class="agent__header">
      <el-input
        v-model="searchInput"
        class="search__input ml-a"
        size="small"
        :clearable="true"
        placeholder="输入你想要找的智能体"
        @click.stop.native
        @clear="$emit('update:isLoading', true)"
        @input="handleSearch">
        <template slot="prefix">
          <svg-icon icon-class="search-btn1" class="fs-16"></svg-icon>
        </template>
      </el-input>
      <span
        class="fs-12 ml-a flex-center flex-shrink-0 hover-svg"
        @click="handleToAgent">
        <span>全部</span>
        <svg-icon icon-class="right-btn" class="fs-10"></svg-icon>
      </span>
    </div>
    <div
      class="agent__body"
      v-infinite-scroll="() => getAgentList()"
      :infinite-scroll-disabled="isEnd"
      :infinite-scroll-immediate="false">
      <list-item v-for="item in list" :key="item.id" :item="item" :is-star="true"/>
    </div>
    <div class="list__empty fs-12" v-show="list.length === 0 && !isLoading">
      <p v-if="searchInput">暂无搜索内容</p>
      <p v-else-if="emptyText">{{ emptyText }}</p>
      <p v-else-if="isStar">暂无收藏记录</p>
      <p v-else>该列表暂无数据</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { debounce } from '@/utils'
import ListItem from './agent-item.vue'
export default {
  name: 'PopAgent',
  inject: ['addNewMessage'],
  components: {
    ListItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isLoading: {
      type: Boolean,
      default: () => false
    },
    isEnd: {
      type: Boolean,
      default: () => false
    },
    emptyText: {
      type: String,
      default: () => ''
    },
    isStar: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      searchInput: ''
    }
  },
  computed: {
    ...mapGetters(['chatStore'])
  },
  created () {
    this.handleSearchInput = debounce((errMsg) => {
      this.$xz('HtmlClickReport', { ReportID: 7622 })
      this.$emit('search', this.searchInput)
    }, 300, false)
  },
  methods: {
    handleSearch () {
      this.$emit('update:isLoading', true)
      this.handleSearchInput()
    },
    getAgentList () {
      this.$emit('more')
    },
    async handleToAgent () {
      this.$store.dispatch('chat/setChatStore', { prevConversionId: this.chatStore.conversionId || '' })
      await this.addNewMessage()
      this.$store.dispatch('agent/setAgentShow', true)

      this.$store.dispatch('chat/setChatStore', { showModels: false })
    }
  }
}
</script>

<style lang="scss" scoped>
.agent__header {
  padding: 0 15px 15px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  .hover-svg {
    gap: 4px;
    color: rgba(255, 255, 255, 0.7);
    &:hover {
      color: #fff;
    }
  }
}
.search__input {
  width: 173px;
  font-size: 12px;
  /deep/ .el-input__inner {
    padding: 0 16px 0 36px;
    border-radius: 49px;
    color: #fff;
  }
  /deep/ .el-input__prefix {
    display: flex;
    align-items: center;
    left: 0;
    .svg-icon {
      margin-left: 16px;
    }
  }
}
.agent__body {
  max-height: 259px;
  overflow: auto;
  padding: 0 15px;
}
.list__empty {
  padding: 20px;
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
</style>
